<template>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
        <el-form :model="form" ref="form" size="small" label-width="120px" :rules="rules">
            <el-row>
                <el-col :span="24">
                    <el-form-item :label="$locale('classList.add class name')" prop="className">
                        <el-input v-model="form.className" :placeholder="$locale('classList.add.Please enter the class name')" :disabled="disabled" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('classList.add.Teacher in charge')" prop="teacherId">
                        <el-select v-model="form.teacherId" :placeholder="$locale('classList.add.Please select the responsible teacher')" clearable style="width: 240px" :disabled="disabled">
                            <el-option v-for="dict in teacherList" :key="dict.id" :label="dict.teacherName" :value="dict.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$locale('classList.add.notes')" prop="remark">
                        <el-input :disabled="disabled" type="textarea" :rows="3" :placeholder="$locale('classList.add.Please enter at least five characters')" v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!disabled">
            <el-button type="primary" @click="submitForm">{{ $locale('classList.add.determine') }}</el-button>
            <el-button @click="cancel">$locale('classList.add.Cancel</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { add, edit, getById } from "@/api/myClass/classList";
import { getList } from "@/api/myClass/teacher";

export default {
    name: "classListAdd",
    data () {
        return {
            // 遮罩层
            loading: true,
            loadingRemote: false,
            // 弹出层标题
            title: "",
            disabled: false,
            // 是否显示弹出层
            open: false,
            // 总条数
            total: 0,
            // 表单参数
            form: {},
            formData: {
                checkList: [],
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deviceNameOrDeviceNum: undefined,
            },
            activeName: 'first',
            optionsList: [],
            options: [],
            listData: [],
            teacherList: [],
            // 表单校验
            rules: {
                className: [
                    { required: true, message: this.$locale('classList.add.tip1'), trigger: "blur" }
                ],
                teacherId: [
                    { required: true, message: this.$locale('classList.add.tip2'), trigger: "change" }
                ],
            }
        };
    },
    created () {
    },
    methods: {
        changeFileTeacher (fileList) {
            this.form.studentGuidebook = fileList
        },
        changeFileStudent () {
            this.form.teacherGuidebook = fileList
        },
        // 上传成功
        changeImage (fileList) {
            this.form.experimentPicture = fileList
        },
        // 表单重置
        reset () {
            this.form = {};
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd (form) {
            this.reset();
            this.open = true;
            this.title = this.$locale('classList.add.added');
            this.getListData()
        },
        /** 修改按钮操作 */
        handleUpdate (row, disabled) {
            this.disabled = disabled || false
            this.reset();
            getById({ id: row.id }).then(({ data }) => {
                this.form = data
                this.open = true;
                this.title = this.$locale('classList.add.modify');
            });
            this.getListData()
        },
        getListData () {
            getList().then(({ data }) => {
                this.teacherList = data
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    const teacher = this.teacherList.find(teacher => teacher.id === this.form.teacherId);
                    this.form.teacherName = teacher.teacherName
                    if (this.form.id != undefined) {
                        edit(this.form).then(response => {
                            this.$modal.msgSuccess(this.$locale('geWudevice.add.tip5'));
                            this.open = false;
                            this.$emit('getList');
                        });
                    } else {
                        add(this.form).then(response => {
                            this.$modal.msgSuccess(this.$locale('geWudevice.add.tip6'));
                            this.open = false;
                            this.$emit('getList');
                        });
                    }
                }
            });
        },
        // 取消按钮
        cancel () {
            this.open = false;
            this.reset();
        },
    }
};
</script>

<style lang="scss" scoped>
.el-rate {
    line-height: 2;
}
</style>
